<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>创客空间后台管理</title>
    <link rel="stylesheet" href="/static/css/bootstrap.min.css">
    <link href="/static/plugins/font-awesome/css/font-awesome.css" rel="stylesheet">
    <link rel="stylesheet" href="/static/css/public.css">
    <!-- jquery 提示插件css -->
    <link href="/static/plugins/toastr.min.css" rel="stylesheet">
    <style>
        .header {
            height: 80px;
            width: 100%;
        }

        .header-menu {
            height: 56px;
            line-height: 56px;
            text-align: center;
            padding: 0 15px;
            color: #fff;
            cursor: pointer;
        }

        .administrator:hover .dropdown-menu {
            display: block;
            top: 53px;
        }

        .dropdown-menuItem {
            line-height: 41px !important;
            color: #777;
            font-size: 12px;
            border-radius: 3px;
            margin: 4px;
            text-align: left;
            font-weight: normal;
        }

        .dropdown-menuItem:hover {
            background-color: #e1e3e9 !important;
            color: #333 !important;
        }

        /*下指向箭头*/
        .caret {
            display: inline-block;
            width: 0;
            height: 0;
            margin-left: 2px;
            vertical-align: middle;
            border-top: 4px dashed;
            border-top: 4px solid \9;
            border-right: 4px solid transparent;
            border-left: 4px solid transparent;
        }

        /*主体布局*/
        .ck-frame-menu-box {
            width: 200px;
            -webkit-transition: all .3s ease-out 0s;
            transition: all .3s ease-out 0s;
        }

        /*左侧点击收回展开按钮*/
        .ck-frame-menu-btn {
            position: absolute;
            top: 0;
            left: 0;
            z-index: 100;
            height: 39px;
            width: 200px;
            color: #9a9a9a;
            text-align: center;
            font-size: 20px;
            cursor: pointer;
            -webkit-transition: all .3s ease-out 0s;
            transition: all .3s ease-out 0s;
            overflow: hidden;
        }

        .ck-left-menu-box {
            height: 100%;
            padding-top: 40px;
        }

        /*展开模式*/
        .second-menu-list {
            display: none;
        }

        .second-menu-list .menu-item {
            height: 40px;
            line-height: 40px;
            color: #fff;
            padding: 0 0 0 20px;
            font-size: 14px;
        }

        .second-menu-list .menu-item:hover {
            background-color: #4a5064;
        }

        .menu-item {
            display: block;
            position: relative;
            text-decoration: none;
            width: 100%;
            overflow: hidden;
        }

        .menu-item-icon {
            font-size: 14px;
            width: 25px;
            vertical-align: middle;
            margin-bottom: 1px;
            opacity: .9;
            filter: alpha(opacity=90);
        }

        .second-menu-list .fa-angle-left {
            position: absolute;
            right: 15px;
            top: 12px;
        }

        .faRotate {
            -webkit-transform: rotate(-90deg);
            -ms-transform: rotate(-90deg);
            -o-transform: rotate(-90deg);
            transform: rotate(-90deg);
        }

        .faDedentRotate {
            -webkit-transform: rotate(-180deg);
            -ms-transform: rotate(-180deg);
            -o-transform: rotate(-180deg);
            transform: rotate(-180deg);
        }

        /*sidebar隐藏的时候宽度减少的css*/
        .sidebarMin {
            width: 50px;
        }

        .three-menu-list {
            height: 0;
            overflow: hidden;
            transition: all 0.5s;
        }

        .four-menu-list {
            height: 0;
            overflow: hidden;
            transition: all 0.5s;
        }

        .three-menu-list .menu-item {
            padding-left: 40px;
        }

        .four-menu-list .menu-item {
            padding-left: 60px;
        }

        .second-menu-list .threeClick:hover {
            background-color: #00c1de;
        }

        .threeClick {
            background: #00c1de;
        }

        /*闭合模式*/
        .sidebar-min-list {
            display: none;
        }

        .sidebar-min-three {
            height: 0;
            overflow: hidden;
            transition: all 0.5s;
        }

        .sidebar-min-four {
            height: 0;
            overflow: hidden;
            transition: all 0.5s;
        }

        .sidebar-min-list .menu-item {
            height: 40px;
            line-height: 40px;
            color: #fff;
            padding: 0 0 0 20px;
            font-size: 14px;
        }

        .sidebar-min-list .menu-item:hover {
            background-color: #4a5064;
        }

        .sidebar-min-list .threeClick:hover {
            background-color: #00c1de;
        }

        /*sidebar显示*/
        .sidebarShow {
            display: block;
        }

        /*sidebar打开*/
        .threeOpen {
            height: auto;
        }

        /*主体中iframe结构*/
        /*头部信息*/
        .iframe-title {
            display: flex;
            height: 40px;
        }

        .iframe-title-fullscreen {
            width: 40px;
            background-color: transparent;
            border: 0;
            outline: none;
        }

        .iframe-title-fullscreen:hover {
            color: #999;
        }

        .iframe-title-tab-menu {
            height: 36px;
            line-height: 36px;
        }

        .J_menuTab {
            -webkit-transition: all .3s ease-out 0s;
            transition: all .3s ease-out 0s;
        }

        .page-tabs a {
            display: block;
            float: left;
            border-right: solid 1px #eee;
            padding: 0 15px;
            color: #666;
        }

        .page-tabs a:hover {
            color: #000;
        }

        .active {
            border-bottom: 3px solid #00c1de;
            background-color: #fff !important;
            color: #000 !important;
        }

        .footer {
            height: 30px;
            line-height: 30px;
            text-align: right;
            padding-right: 15px;
            background: #fff;
            color: #000;
            border-top: 1px solid #dadada;
        }
    </style>
</head>
<body>
<div id="app" style="height: 100%;width: 100%;display: flex;flex-direction: column;">
    <!--顶部选项卡信息-->
    <header class="header topBarColor float-clear">
        <!--选项卡-->
        <div class="header-menu float-left float-clear" style="font-size: 20px;">
            <img class="float-left" style="height: 47px;margin-top: 7px;margin-right: 10px;" src="/static/image/logo.png"
                 alt="">
            <span class="float-left">创客空间 智慧水务一体化平台</span>
        </div>
        <div class="float-clear float-right">
            <div class="header-menu float-right administrator">
                <span>超级管理员</span>
                <span class="caret"></span>
                <ul class="dropdown-menu pull-right" style="padding: 10px 0">
                    <li>
                        <a class="dropdown-menuItem J_menuItem" data-id="userInfo" href="/SystemManage/User/Info">
                            <i class="fa fa-user"></i>个人信息</a>
                    </li>
                    <li>
                        <a class="dropdown-menuItem" href="/core/user/logout/"><i class="ace-icon fa fa-power-off"></i>安全退出</a>
                    </li>
                </ul>
            </div>
            <!--循环选项卡父集-->
            <div class="header-menu float-right" v-for="(item,index) in treeData"
                 v-bind:class="{topBarClickColor: item.isActive}"
                 @click="changeTab(item.children,index)">
                <span><i v-bind:class="item.icon" style="margin-right: 5px;"></i>{{item.name}}</span>
            </div>
        </div>
    </header>
    <!--主体结构-->
    <div style="display: flex;position: relative;height: 100%;">
        <!--左侧树结构menu-->
        <div class="ck-frame-menu-box" v-bind:class="{sidebarMin:sidebarShow}">
            <!--点击收回-->
            <div class="ck-frame-menu-btn sideBarHoverBgColor" v-bind:class="{sidebarMin:sidebarShow}">
                <div v-if="!sidebarShow" style="margin-top: 9px;">
                    <iframe width="200" scrolling="no" height="40" frameborder="0" allowtransparency="true"
                            src="http://i.tianqi.com/index.php?c=code&id=10&color=%23FFFFFF&icon=1&site=12"></iframe>
                </div>
            </div>
            <!--左侧menu-->
            <div class="ck-left-menu-box sideBarBgColor">
                <!--展开模式-->
                <ul class="second-menu-list" v-bind:class="{sidebarShow:!sidebarShow}">
                    <!--组件循环-->
                    <li v-for="categoryItem in categoryData" v-bind:class="{threeOpen: categoryItem.isActive}">
                        <a href="javascript:void(0);" class="menu-item" @click="categoryClick(categoryItem)"
                           v-bind:class="{threeClick: categoryItem.isActive&&categoryItem.children==0}">
                            <i class="menu-item-icon" v-bind:class="categoryItem.icon"></i>
                            <span>{{categoryItem.name}}</span>
                            <span class="fa fa-angle-left" v-if="categoryItem.children!=0"
                                  v-bind:class="{faRotate:categoryItem.isActive}">
                            </span>
                        </a>
                        <ul class="three-menu-list" v-bind:class="{threeOpen: categoryItem.isActive}">
                            <li v-for="secondItem in categoryItem.children">
                                <a href="javascript:void(0);" class="menu-item" @click="secondClick(secondItem)"
                                   v-bind:class="{threeClick: secondItem.isActive&&secondItem.children==0}">
                                    <i v-bind:class="secondItem.icon"></i>
                                    <span class="nav-label">{{secondItem.name}}</span>
                                    <span class="fa fa-angle-left" v-if="secondItem.children!=0"
                                          v-bind:class="{faRotate:secondItem.isActive}"></span>
                                </a>
                                <ul class="four-menu-list" v-bind:class="{threeOpen: secondItem.isActive}">
                                    <li v-for="(thirdItem,thirdIndex) in secondItem.children">
                                        <a href="javascript:void(0);" class="menu-item" @click="thirdClick(thirdItem)"
                                           v-bind:class="{threeClick: thirdItem.isActive}">
                                            <i v-bind:class="thirdItem.icon"></i>
                                            <span class="nav-label">{{thirdItem.name}}</span>
                                        </a>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                </ul>
                <!--闭合模式-->
                <ul class="sidebar-min-list" v-bind:class="{sidebarShow:sidebarShow}">
                    <li v-for="categoryItem in categoryData">
                        <a href="javascript:void(0);" class="menu-item popover-toggle"
                           data-container="body" data-toggle="popover" data-placement="right"
                           data-content=" " @click="categoryClick(categoryItem)"
                           v-bind:class="{threeClick: categoryItem.isActive&&categoryItem.children==0}">
                            <i class="menu-item-icon" v-bind:class="categoryItem.icon"></i>
                            <label style="display: none;">{{categoryItem.name}}</label>
                        </a>
                        <ul class="sidebar-min-three" v-bind:class="{threeOpen: categoryItem.isActive}">
                            <li v-for="secondItem in categoryItem.children">
                                <a href="javascript:void(0);" class="menu-item popover-toggle"
                                   data-container="body" data-toggle="popover" data-placement="right"
                                   data-content=" " @click="secondClick(secondItem)"
                                   v-bind:class="{threeClick: secondItem.isActive&&secondItem.children==0}">
                                    <i v-bind:class="secondItem.icon"></i>
                                    <label style="display: none;">{{secondItem.name}}</label>
                                </a>
                                <ul class="sidebar-min-four" v-bind:class="{threeOpen: secondItem.isActive}">
                                    <li v-for="(thirdItem,thirdIndex) in secondItem.children">
                                        <a href="javascript:void(0);" class="menu-item popover-toggle"
                                           data-container="body" data-toggle="popover" data-placement="right"
                                           data-content=" " @click="thirdClick(thirdItem)"
                                           v-bind:class="{threeClick: thirdItem.isActive}">
                                            <i v-bind:class="thirdItem.icon"></i>
                                            <label style="display: none;">{{thirdItem.name}}</label>
                                        </a>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
        <!--右侧结构-->
        <div style="flex: 1;display: flex;flex-direction:column;">
            <!--头部-->
            <div class="iframe-title border-bottom">
                <!--点击后添加到的标签-->
                <div style="flex: 1;" class="float-clear content-tabs">
                    <nav class="page-tabs J_menuTabs" style="height: 39px;overflow: hidden">
                        <div class="page-tabs-content iframe-title-tab-menu float-left">
                            <a href="javascript:;" class="active J_menuTab" data-id="default.html">首页</a>
                        </div>
                    </nav>
                </div>
                <!--关闭选项卡-->
                <div class="btn-group">
                    <button class="dropdown J_tabClose iframe-title-fullscreen" style="width: 80px;height: 40px;"
                            data-toggle="dropdown">关闭操作<span class="caret"></span></button>
                    <ul role="menu" class="dropdown-menu dropdown-menu-right">
                        <li class="J_tabShowActive">
                            <a class="dropdown-menuItem" style="line-height: 25px !important;">定位当前选项卡</a>
                        </li>
                        <li class="divider"></li>
                        <li class="J_tabCloseAll">
                            <a class="dropdown-menuItem" style="line-height: 25px !important;">关闭全部选项卡</a>
                        </li>
                        <li class="J_tabCloseOther">
                            <a class="dropdown-menuItem" style="line-height: 25px !important;">关闭其他选项卡</a>
                        </li>
                    </ul>
                </div>
                <!--点击收回-->
                <div style="width: 50px;line-height: 40px;font-size: 18px;cursor: pointer;" class="text-center"
                     onclick="sidebarClick()">
                    <i class="fa fa-fw fa-dedent" v-bind:class="{faDedentRotate:sidebarShow}"></i>
                </div>
                <!--全屏模式-->
                <button class="iframe-title-fullscreen fullscreen" title="全屏模式">
                    <i class="glyphicon glyphicon-fullscreen"></i>
                </button>
            </div>
            <!--主体部分-->
            <div style="flex: 1;-webkit-box-flex: 1;width: 100%;">
                <div class="J_mainContent" style="width: 100%;height: 100%;">
                    <iframe class="J_iframe" name="iframe0" width="100%" height="100%"
                            src="secondSupply/personalMap.html" frameborder="0"
                            data-id="default.html" seamless></iframe>
                </div>
            </div>
            <!--底部-->
            <div class="footer">版权所有@山西创客空间科技有限公司</div>
        </div>
    </div>
</div>
<!-- 全局js -->
<script src="/static/js/jquery.min.js?v=2.1.4"></script>
<script src="/static/js/bootstrap.min.js"></script>
<script src="/static/js/index.js"></script>
<script type="text/javascript" src="/static/js/contabs.js"></script>
<!--vue-->
<script src="/static/js/vue.min.js"></script>
<!-- Toastr -->
<script src="/static/plugins/toastr/toastr.min.js"></script>
<!--公共服务插件-->
<script src="/static/js/publicServe.js"></script>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            oldIndex: 0,            //顶部选项卡旧下标
            oldItem: null,          //左侧选项卡旧对象
            sidebarShow: false,      //缩进判断
            categoryItem: null,      //第一层选项卡旧对象
            secondItem: null,        //第二层选项卡旧对象
            thirdItem: null,        //第二层选项卡旧对象
            treeData: [],           //整体树结构
            categoryData: [],        //左侧 一级类信息
            tabMenuLists: [],        //iframe上部分title中添加的按钮
        },
        methods: {
            //切换选项卡
            changeTab: function (item, index) {
                Vue.set(vm.treeData[vm.oldIndex], 'isActive', false);
                vm.oldIndex = index;
                Vue.set(vm.treeData[index], 'isActive', true);
                vm.categoryData = item;
                //绑定小型sideBar事件
                setTimeout(function () {
                    //绑定小型sideBar事件
                    $('.popover-toggle').popover({trigger: 'hover'});
                    $('.popover-toggle').on('shown.bs.popover', function () {
                        $(".popover-content").html($(this).children("label").text());
                    })
                }, 500)
            },
            categoryClick: function (item) {
                //使用vue  set方法 强制性更新界面
                if (vm.categoryItem) {
                    Vue.set(vm.categoryItem, 'isActive', false);
                }
                if(vm.categoryItem && vm.categoryItem.id == item.id){
                    Vue.set(item, 'isActive', false);
                    vm.categoryItem = null;
                }else{
                    Vue.set(item, 'isActive', true);
                    vm.categoryItem = item;
                }
                //添加选项卡
                ckAddPageTabs(item);
            },
            secondClick: function (item) {
//                console.log('secondClick=>'+item.name);
                //使用vue  set方法 强制性更新界面
                if (vm.secondItem) {
                    Vue.set(vm.secondItem, 'isActive', false);
                }
                if(vm.secondItem && vm.secondItem.id == item.id){
                    Vue.set(item, 'isActive', false);
                    vm.secondItem = null;
                }else{
                    Vue.set(item, 'isActive', true);
                    vm.secondItem = item;
                }
                //添加选项卡
                ckAddPageTabs(item);
            },
            thirdClick: function (item) {
                //使用vue  set方法 强制性更新界面
                if (vm.thirdItem) {
                    Vue.set(vm.thirdItem, 'isActive', false);
                }
                Vue.set(item, 'isActive', true);
                vm.thirdItem = item;
                //添加选项卡
                ckAddPageTabs(item);
            }
        }
    });

    //添加选项卡
    function ckAddPageTabs(item) {
        //将iframe中的src值改了 并且添加菜单卡
        var flag = true;
        // 选项卡菜单已存在
        $('.J_menuTab').each(function () {
            if ($(this).data('id') == item.url) {
                if (!$(this).hasClass('active')) {
                    $(this).addClass('active').siblings('.J_menuTab').removeClass('active');
                    // 显示tab对应的内容区
                    $('.J_mainContent .J_iframe').each(function () {
                        if ($(this).data('id') == item.url) {
                            $(this).show().siblings('.J_iframe').hide();
                            return false;
                        }
                    });
                }
                flag = false;
                return false;
            }
        });
        // 选项卡菜单不存在
        if (item.url && flag) {
            var str = '<a href="javascript:;" class="active J_menuTab" data-id="' + item.url + '">' + item.name + ' <i class="fa fa-times-circle"></i></a>';
            $('.J_menuTab').removeClass('active');
            // 添加选项卡对应的iframe
            var str1 = '<iframe class="J_iframe" width="100%" height="100%" src="' + item.url + '" frameborder="0" data-id="' + item.url + '" seamless></iframe>';
            $('.J_mainContent').find('iframe.J_iframe').hide().parents('.J_mainContent').append(str1);
            // 添加选项卡
            $('.J_menuTabs .page-tabs-content').append(str);
        }
    }

    //右侧缩进
    function sidebarClick() {
        //保存点击的状态
        vm.sidebarShow = !vm.sidebarShow;
        localStorage.setItem('sidebarShow', vm.sidebarShow)
    }

    //dom渲染完成后加载
    $(document).ready(function () {
        //获取左侧选项卡信息
        $.ajax({
            url: 'http://172.16.202.224:8080/core/module/get_tree_first_page/',
            type: 'POST',
            dataType: "json",
            data: '',
            async: true,
            contentType: "application/json",
            success: function (response) {
                if (response && response.success == 1) {
                    vm.treeData = response.data;
                    //获取上次点击的状态
                    vm.sidebarShow = localStorage.getItem('sidebarShow') == 'true' ? true : false;
                    Vue.set(vm.treeData[0], 'isActive', true);
                    if (vm.treeData[0]) {
                        vm.categoryData = vm.treeData[0].children;
                        setTimeout(function () {
                            //绑定小型sideBar事件
                            $('.popover-toggle').popover({trigger: 'hover'});
                            $('.popover-toggle').on('shown.bs.popover', function () {
                                $(".popover-content").html($(this).children("label").text());
                            })
                        }, 500)
                    }
                }
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                switch (XMLHttpRequest.status) {
                    case(500):
                        toastr.info('服务器系统内部错误');
                        break;
                    case(403):
                        toastr.info("无权限执行此操作");
                        break;
                    case(408):
                        toastr.info("请求超时");
                        break;
                    default:
                        toastr.info(XMLHttpRequest.responseText);
                }
            }
        });
    });

    //弹出框提示配置
    toastr.options = {
        "closeButton": true,
        "debug": false,
        "progressBar": true,
        "preventDuplicates": false,
        "positionClass": "toast-bottom-right",
        "onclick": null,
        "showDuration": "400",
        "hideDuration": "1000",
        "timeOut": "2000",
        "extendedTimeOut": "1000",
        "showEasing": "swing",
        "hideEasing": "linear",
        "showMethod": "fadeIn",
        "hideMethod": "fadeOut"
    };
</script>
</body>
</html>